<template>
  <v-container>
    <v-row>
      <v-col cols="4" class="mx-auto ">
        <v-img
          alt="TreeHole Logo"
          class="shrink mt-5 mx-auto"
          contain
          src="/upload/assets/ts.png"
          transition="scale-transition"
          width="100"
        />
        <v-form
          ref="form"
          v-model="valid"
          lazy-validation
          class="mt-5"
        >
          <v-text-field
            v-model="name"
            counter="16"
            label="用户名"
            :rules="nameRules"
            prepend-icon="mdi-account"
            required
          ></v-text-field>

           <v-text-field
            v-model="email"
            type="email"
            label="邮箱" 
            hint="请输入格式正确的邮箱"
            prepend-icon="mdi-email"
            :rules="emailRules"
          ></v-text-field>
          
          <v-text-field
            v-model="password"
            type="password"
            counter="18"
            label="密码"
            hint="密码长度在6到18之间"
            prepend-icon="mdi-lock-outline"
            :rules="pwdRules"
          ></v-text-field>

          <v-text-field
            v-model="rpassword"
            type="password"
            counter="18"
            label="确认密码"
            hint="密码长度在6到18之间"
            prepend-icon="mdi-lock-outline"
            :rules="rpwdRules"
          ></v-text-field>

          <v-radio-group
            v-model="gender"
            row
            mandatory
          >
            <v-radio
              label="男"
              value="false"
            ></v-radio>
            <v-radio
              label="女"
              value="true"
            ></v-radio>
          </v-radio-group>

          
          <v-row
            align="center"
            justify="end"
          >
            <v-btn
              tile
              color="success"
              @click="register_account"
            >
              <v-icon left>mdi-tree</v-icon>
              注册
            </v-btn>
          </v-row>
        </v-form>
      </v-col>
    </v-row>

    <v-overlay :value="overlay">
      <v-progress-circular
        indeterminate
        size="64"
      ></v-progress-circular>
    </v-overlay>
  </v-container>
</template>

<script>
export default {
  name: 'MyRegister',
  data:()=>({
    name: '',
    password: '',
    rpassword: '',
    email: '',
    gender: false,
    valid: true,
    overlay: false,
    nameRules: [
      v => !!v || '用户名必须填写！',
      v => (v && v.length > 2 && v.length < 17) || '用户名不合法！用户名长度必须在3到16之间！',
      v => /^[\u4E00-\u9FFFa-zA-Z]{1}[\u4E00-\u9FFFa-zA-Z0-9]{2,15}$/.test(v) || 
        '用户名不合法!用户名应该不以数字开头！'
    ],
    pwdRules: [
      v => !!v || '密码必须填写！',
      v => (v && v.length > 5 && v.length < 19) || '密码不合法！密码长度必须在6到18之间！',
      v => /^[$@!%*#~?&0-9a-zA-Z]{6,18}$/.test(v) || '密码不合法！密码只能包含数字、字母、特殊字符！'
    ],
    emailRules: [
      v => !!v || '邮箱必须填写！',
      v => /.+@.+\..+/.test(v) || '邮箱不合法！',
    ],
  }),
  computed: {
      rpwdRules () {
        const rules = []

        rules.push(v => !!v || '确认密码必须填写！')
        rules.push( v => v == this.password || '两次密码不相等！')

        return rules
      }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const code = to.query.code
      // 注册有两种功能：
      // 1.激活验证码，并打印消息
      // 2.获取激活码
      if(code){
        vm.overlay = true
        vm.$axios.get('/api/user/active',{
          params:{code},
        }).then(rep=>{
            const res = rep.data
            if(res.status != 200){
              vm.$message.error(res.msg)
              return;
            }

            vm.$message.success(res.msg)
            
            setTimeout(() => {
              // 防止消息重叠
              vm.$message('5秒后自动跳转到登录页...')
            }, 10);
            
            // 5秒后跳转到首页
            setTimeout(() => {
              vm.$router.replace('/login')
            }, 5000);
        })
        .catch(Error=>{
          console.log(Error)
        }).finally(()=>{
          vm.overlay = false
          vm.$router.push({ query: {}})
        })
      }
    })
  },
  methods:{
    register_account(){
      if(this.$refs.form.validate()){
        const user = {
          name: this.name,
          password: this.password,
          email: this.email,
          gender: this.gender
        }
        this.overlay = true
        this.$axios.post('/api/user/register', this.$qs.stringify(user)).then(rep=>{
          const res = rep.data
          if(res.status == 200) this.$message.success('注册激活码已发送至邮箱，请勿重复注册')
          else this.$message.error(res.msg)
        })
        .catch(Error=>{
            console.log(Error)
        }).finally(()=>{
          this.overlay = false
        })
        
      }
    }
  }
}
</script>

<style>

</style>